<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小说网站后台登陆</title>
		<link rel="stylesheet" type="text/css" href="/public/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="/public/css/login.css" />
		<script src="/public/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="/public/js/config.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="login_wapper">
			<div class="login_form">
				<h2>小说网站后台登陆</h2>
				<form class="layui-form" action="/" lay-filter="example">
					<div class="layui-form-item">
						<label class="layui-form-label">用户名</label>
						<div class="layui-input-block">
							<input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">密码</label>
						<div class="layui-input-block">
							<input type="password" name="password" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-input-block">
							<input type="checkbox" name="isauto" lay-skin="primary" title="一周内自动登陆">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit="" lay-filter="login">登陆</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script type="text/javascript">
			layui.use(['form'], function() {
				var $ = layui.jquery;
				var form = layui.form;
				//自定义验证规则
				form.verify({
					username: function(value) {
						if (value.length < 5) {
							return '标题至少得5个字符啊';
						}
					},
					password: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格']
				});

				//监听提交
				form.on('submit(login)', function(data) {
					var params = data.field;
					$.post('login', params).then(function(res) {
						console.log(res);
					})
					layer.alert(JSON.stringify(data.field), {
						title: '最终的提交信息'
					})
					return false;
				});
			});
		</script>
	</body>
</html>